<template>
    <div
      ref='inputWrap'
      class="inputWrap white"
      :class="{'border-bottom':borderBottom}"
    >
      <div
        class="input box vertical-center"
        :style='wrapStyleData'
        :class="{'border-bottom':contantBottom}"
      >
        <p
          class="input-title"
          :style='titleStyle'
        ><slot></slot></p>
        <div class="box-1">
          <div class="box">
            <input
              ref='input'
              class="input-value box-1"
              :type="inputType"
              :value="inputValueData"
              :placeholder='placeholder'
              @focus="inputFocus"
              @blur="inputBlur"
              :disabled='inputDisabled'
              :style='inputStyle'
              @input='inputText($event)'
              :class="{'input-right':inputRight}"
            />
            <img
              v-if="clearShow && iconShow"
              class="icon-clear"
              src="../assets/images/clear.png"
              @click='clear'
            />
          </div>
        </div>
        <com-button
          class="aaa"
          v-if='isButton' 
          :disabled='btnDisabledData'
          btn-id='inputButton'
          :btnStyle='btnStyle'
          @btn-click='inputBtnClick'
        >{{btnTextData}}</com-button>
      </div>
    </div>
</template>
<script>
import ComButton from '_c/com-button'
import { Tools } from '../lib/tools.js'
export default {
  components: { ComButton },
  data () {
    return {
      inputValueData: this.inputValue,
      wrapStyleData: this.wrapStyle,
      btnTextData: this.btnText,
      btnDisabledData: this.inputBtnDisabled,
    }
  },
  props: {
    borderBottom: {
      type: Boolean,
      default: true
    },
    wrapStyle: {
      type: String,
      default: ""
    },
    contantBottom: {
      type: Boolean,
      default: true
    },
    titleStyle: {
      type: String,
      default: ""
    },
    inputStyle: {
      type: String,
      default: ""
    },
    btnStyle: {
      type: String,
      default: "width:25%;height:2rem;padding-left:5px;padding-right:5px;border-radius:50px;font-size:0.75rem;margin:0;line-height:2rem;margin-left:0.2rem;"
    },
    inputType: {
      type: String,
      default: "text"
    },
    inputValue: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    inputDisabled: {
      type: Boolean,
      default: false
    },
    inputRight: {
      type: Boolean,
      default: false
    },
    iconShow: {
      type: Boolean,
      default: true
    },
    isButton: {
      type: Boolean,
      default: false
    },
    inputBtnDisabled: {
      type: Boolean,
      default: true
    },
    btnText: {
      type: String,
      default: ""
    },
    firstSplitLength: {
      type: Number,
      default: 0
    },
    splitLength: {
      type: Number,
      default: 0
    },
    maxLength: {
      type: Number,
      default: 100
    },
  },
  computed: {
    clearShow () {
      return !Tools.check.isEmpty(this.inputValueData)
    }
  },
  watch: {
    inputValue ( value ) {
      this.inputValueData = value;
    },
    wrapStyle ( value ) {
      this.wrapStyleData = value;
    },
    btnText ( value ) {
      this.btnTextData = value;
    },
    inputBtnDisabled ( value ) {
      this.btnDisabledData = value
    }
  },
  methods: {
    inputText(event) {
      let value = event.target.value
      if ( this.inputType == 'tel') {
          this.$refs.input.value = value = Tools.convert.inputIntegerWithLength(value, this.maxLength);
      }
      this.$emit('on-input', value)
    },
    clear() {
      this.inputValueData = ''
      this.$emit('on-input', '')
    },
    inputFocus() {
      this.inputValueData = Tools.convert.trim(this.$refs.input.value)
    },
    inputBlur() {
      let value = Tools.convert.stringWithSpace(this.inputValue, this.firstSplitLength, this.splitLength);
      this.inputValueData = value
    },
    inputBtnClick() {
      this.$emit('input-btn-click')
    }
  }
};
</script>
<style scoped>
.inputWrap{
  width: 100%
}
.input {
  width: 85%;
  height: 3.125rem;
  margin: 0 auto;
}
.input-title {
  width: 30%;
  font-size: 0.9375rem;
  text-align: left;
  color: #4a4a4a
}
.input-value {
  appearance: none;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari 和 Chrome */
  border: 1px solid transparent;
  outline: transparent solid 1px;
  color: #4a4a4a;
  height: 90%;
  line-height: normal;
  font-size: 0.9375rem;
  text-overflow: ellipsis;
  background-color: transparent;
  width: 80%;
  margin-left: -1px;
  display: block
}
.icon-clear {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* 变量 */
.border-bottom {
  border-bottom: 1px solid #DCDCDC;
}
.input-right{
  text-align: right
}
</style>
